<template>
  <div>
    <cmpTabs @F_GetTabsIndex="F_GetTabsIndex" :tabs="tabs"></cmpTabs>
    <!-- <button @click="aaa">点击回到小程序首页</button> -->
    <!-- <cmpdate /> -->
    <p class="p1"></p>
    <div class="content">
      <ul class="content_lable" v-for="(item,index) in lable" :key="index">
        <li>{{item.name}}</li>
        <li class="c_r">{{item.val}}</li>
      </ul>
    </div>
    <!-- 成交率漏斗 -->
    <div class="echarts echarts_mar">
      <div class="echarts_title">成交率漏斗</div>
      <div class="echarts_funnel"></div>
    </div>
    <!-- 商城订单量&交易金额 -->
    <div class="echarts echarts_mar">
      <div class="echarts_title">商城订单量&交易金额</div>
      <div class="echarts_tabs">
        <ul :class="[recentDayIndex1 == index ? 'sel':'']" v-for="(val,index) in recentDaylist" :key="index" @click="recentDay1(index)">{{val}}</ul>
      </div>
      <div class="echarts_line"></div>
    </div>
    <!-- 新增客户 -->
    <div class="echarts echarts_mar">
      <div class="echarts_title">新增客户</div>
      <div class="echarts_tabs">
        <ul :class="[recentDayIndex2 == index ? 'sel':'']" v-for="(val,index) in recentDaylist" :key="index" @click="recentDay2(index)">{{val}}</ul>
      </div>
      <div class="echarts_line"></div>
    </div>
    <!-- 咨询客户 -->
    <div class="echarts">
      <div class="echarts_title">咨询客户</div>
      <div class="echarts_tabs">
        <ul :class="[recentDayIndex3 == index ? 'sel':'']" v-for="(val,index) in recentDaylist" :key="index" @click="recentDay3(index)">{{val}}</ul>
      </div>
      <div class="echarts_line"></div>
    </div>
    <!-- 跟进客户 -->
    <div class="echarts">
      <div class="echarts_title">跟进客户</div>
      <div class="echarts_tabs">
        <ul :class="[recentDayIndex4 == index ? 'sel':'']" v-for="(val,index) in recentDaylist" :key="index" @click="recentDay4(index)">{{val}}</ul>
      </div>
      <div class="echarts_line"></div>
    </div>
    <!-- 客户兴趣占比 -->
    <div class="echarts echarts_mar">
      <div class="echarts_title">客户兴趣占比</div>
      <div class="echarts_pie"></div>
    </div>
    <!-- 进十五日客户活跃度 -->
    <div class="echarts echarts_mar">
      <div class="echarts_title">进十五日客户活跃度</div>
      <div class="echarts_line"></div>
    </div>
    <!-- 进十五日客户点击量 -->
    <div class="echarts_bottom">
      <div class="echarts_title">近十五日客户点击量</div>
      <div class="echarts_bottom_div" v-for="(item,index) in barDatas" :key="index">
        <h6 style=" font-weight: 400">{{item.name}}</h6>
        <span :style="{width:`${item.rate*60/100}vw`}"></span>
        <li>{{item.rate}}%</li>
      </div>
    </div>
    <Loading v-show="LoadingShow"></Loading>
    <!-- <Loading v-show="false"></Loading> -->
  </div>
</template>

<script>
let echarts = require("../../node_modules/echarts/lib/echarts");
//引入T形图组件
require("../../node_modules/echarts/lib/chart/funnel");
//引入折线图
require("../../node_modules/echarts/lib/chart/line");
//引入环形图
require("../../node_modules/echarts/lib/chart/pie");
//引入柱状图
require("../../node_modules/echarts/lib/chart/bar");

//引入legent
require("../../node_modules/echarts/lib/component/legendScroll");

import cmpTabs from "./common/index_tabs.vue";
import cmpdate from "./common/date.vue";

import Common from "../assets/js/common.js";
let Mycommon = new Common();
//  Mycommon.throttle
import Loading from "./common/Loading.vue";
export default {
  components: { cmpTabs, cmpdate, Loading },
  data() {
    return {
      LoadingShow: true,
      tabs: ["汇总", "昨日", "近七天", "近三十天"],
      tabIndex: 0,
      recentDaylist: ["近七天", "近十五天", "近三十天"],
      recentDayIndex1: 0,
      recentDayIndex2: 0,
      recentDayIndex3: 0,
      recentDayIndex4: 0,
      lable: [], //九宫格
      //漏斗图data
      drawLinelist: {
        data: [],
        legend: []
      },
      //金额+数量
      MlineDatas: {
        data1: [],
        data2: []
      },
      //数量
      NlineDatas: {
        data1: [],
        data2: []
      },
      //新增客户
      line1Datas: {
        data1: [],
        data2: []
      },
      //咨询客户
      line2Datas: {
        data1: [],
        data2: []
      },
      //跟进客户
      line3Datas: {
        data1: [],
        data2: []
      },
      //进十五日客户活跃度
      // line4Datas: {
      //   data1: [],
      //   data2: []
      // },
      //进十五日客户兴趣
      barDatas: [],
      //兴趣占比data
      PieData: {
        data: [],
        legend: []
      }
    };
  },
  created() {
    // wx.getSystemInfo({
    //   success: function(res) {
    //     alert(res);
    //   }
    // });
  },
  methods: {
    //深拷贝

    // wx.miniProgram.navigateTo({url: '../index/index'})
    F_GetTabsIndex(index) {
      let that = this;
      this.tabIndex = index;
      this.Jiugongge();
    },

    //九宫格data
    Jiugongge() {
      let that = this;

      Mycommon.http({
        url: "BossRadarNine",
        data: {
          type: that.tabIndex
        },
        success(res) {
          that.LoadingShow = false;
          // console.log(res)
          let data = res.data.data;
          let aa = [];
          let bb = [
            { name: "新增客户数" },
            { name: "浏览客户数" },
            { name: "跟进客户数" },
            { name: "沟通客户数" },
            { name: "商城销售金额" },
            { name: "商城订单数" },
            { name: "被转发次数" },
            { name: "被保存次数" },
            { name: "被点赞次数" }
          ];
          for (let name in data) {
            data[name] = data[name] || "0";
            aa.push({ val: data[name] });
          }

          aa.forEach((val, index) => {
            aa[index].name = bb[index].name;
          });
          that.lable = aa;

          // alert('jiugogge')
          // console.log("九宫格加载完成。。。");
        }
      });
    },

    //漏斗图data
    drawLineData() {
      let that = this;
      Mycommon.http({
        url: "BossDealRate",
        success(res) {
          let data = [];
          let legend = ["总用户数", "跟进数", "成交数"];
          let ress = res.data.data;
          for (let val in ress) {
            data.push({ aa: ress[val] });
          }
          data.forEach((val, index) => {
            data[index].name = `${legend[index]}:${val.aa}`;
            legend[index] = data[index].name;
          });
          that.drawLinelist.data = data;
          that.drawLinelist.legend = legend;
          // console.log(data)
          //  console.log("漏斗图数据加载完成。。。");
          that.drawLine();
        }
      });
    },
    //漏斗图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例

      let aa = ["3", "2", "1"];
      this.drawLinelist.data.forEach((val, index) => {
        val.value = aa[index];
      });
      // console.log(this.drawLinelist.data)
      let that = this;
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_funnel")[0]
      );
      // 绘制图表
      let option = {
        color: ["#91c7ae", "#d48265", "#c23531"],
        legend: {
          data: that.drawLinelist.legend,
          bottom: 20,
          itemGap: 30
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "20%",
            top: "0%",
            bottom: "40%",
            width: "60%",
            // min: 10,
            // max: 100,
            minSize: "30%",
            maxSize: "100%",
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{b}"
              }
            },
            itemStyle: {},
            data: that.drawLinelist.data
          }
        ]
      };
      myChart.setOption(option);
    },

    //商城订单量&交易金额
    recentDay1(index) {
      let that = this;
      this.recentDayIndex1 = index;

      let data1 = Mycommon.deepCopy(that.MlineDatas);
      let data2 = Mycommon.deepCopy(that.NlineDatas);
      // console.log(data1)
      for (let i in data1) {
        if (index == 0) {
          data1[i] = data1[i].splice(data1[i].length - 7);
        } else if (index == 1) {
          data1[i] = data1[i].splice(data1[i].length - 15);
        }
      }

      for (let i in data2) {
        if (index == 0) {
          data2[i] = data2[i].splice(data2[i].length - 7);
        } else if (index == 1) {
          data2[i] = data2[i].splice(data2[i].length - 15);
        }
      }
      that.echarts_line(data1, data2);
    },
    echarts_lineData() {
      // console.log('商城订单量&交易金额完成...')
      let that = this;
      Mycommon.http({
        url: "BossOrderMoney",
        success(res) {
          res.data.data.forEach(val => {
            // console.log(val.date.toString().slice(5,10))
            that.MlineDatas.data1.push(val.date.toString().substring(5));
            that.MlineDatas.data2.push(val.money_number);

            that.NlineDatas.data1.push(val.date.toString().substring(5));
            that.NlineDatas.data2.push(val.order_number);
          });
          let data1 = Mycommon.deepCopy(that.MlineDatas);
          let data2 = Mycommon.deepCopy(that.NlineDatas);

          for (let i in data1) {
            data1[i] = data1[i].splice(data1[i].length - 7);
          }
          for (let i in data2) {
            data2[i] = data2[i].splice(data2[i].length - 7);
          }
          that.echarts_line(data1, data2);
        }
      });
    },
    echarts_line(data1, data2) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_line")[0]
      );
      // 绘制图表
      let option = {
        legend: {
          data: ["金额", "数量"],
          top: "6%"
        },
        tooltip: {
          trigger: "axis"
        },
        color: ["#6fb0bb", "#d48265", "#c23531"],
        xAxis: {
          gridIndex: "0",
          type: "category",
          boundaryGap: false,
          data: data1.data1
        },
        yAxis: [
          {
            type: "value",
            position: "left"
          },
          {
            type: "value",
            position: "right"
          }
        ],
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true
        },
        series: [
          {
            name: "金额",
            data: data1.data2,
            type: "line",
            areaStyle: { normal: {} }
            // label: {
            //   normal: {
            //     show: true,
            //     position: "top"
            //   }
            // }
          },
          {
            name: "数量",
            yAxisIndex: 1,
            data: data2.data2,
            type: "line",
            areaStyle: { normal: {} }
          }
        ]
      };
      myChart.setOption(option);
    },

    //新增客户
    recentDay2(index) {
      let that = this;
      this.recentDayIndex2 = index;
      let data = Mycommon.deepCopy(that.line1Datas);
      for (let i in data) {
        if (index == 0) {
          data[i] = data[i].splice(data[i].length - 7);
        } else if (index == 1) {
          data[i] = data[i].splice(data[i].length - 15);
        }
      }
      that.echarts_line1(data);
    },
    echarts_line1Data() {
      // console.log('新增客户data完成...')
      let that = this;

      Mycommon.http({
        url: "BossNewClient",
        success(res) {
          // console.log(res.data.data)
          res.data.data.forEach(val => {
            // console.log(val.date.toString().slice(5,10))
            that.line1Datas.data1.push(val.date.toString().substring(5));
            that.line1Datas.data2.push(val.number);
          });
          let data = Mycommon.deepCopy(that.line1Datas);

          for (let i in data) {
            data[i] = data[i].splice(data[i].length - 7);
          }

          that.echarts_line1(data);
        }
      });
    },
    echarts_line1(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_line")[1]
      );
      // 绘制图表
      let option = {
        color: ["#f6acac", "#d48265", "#c23531"],
        xAxis: {
          gridIndex: "0",
          type: "category",
          boundaryGap: false,
          data: data.data1
          // axisLabel:{
          //   rotate:'310'
          // }
        },
        yAxis: [
          {
            type: "value",
            position: "left"
          }
        ],
        grid: {
          top: "20%",
          left: "5%",
          right: "12%",
          bottom: "10%",
          containLabel: true
        },
        series: [
          {
            data: data.data2,
            type: "line",
            areaStyle: { normal: {} }

            // label: {
            //   normal: {
            //     show: true,
            //     position: "top"
            //   }
            // }
          }
        ]
      };
      myChart.setOption(option);
    },

    //咨询客户
    recentDay3(index) {
      let that = this;
      this.recentDayIndex3 = index;
      let data = Mycommon.deepCopy(that.line2Datas);
      for (let i in data) {
        if (index == 0) {
          data[i] = data[i].splice(data[i].length - 7);
        } else if (index == 1) {
          data[i] = data[i].splice(data[i].length - 15);
        }
      }
      that.echarts_line2(data);
    },
    echarts_line2Data() {
      // console.log('咨询客户data完成...')
      let that = this;
      Mycommon.http({
        url: "BossAskClient",
        success(res) {
          //  console.log(res)
          res.data.data.forEach(val => {
            that.line2Datas.data1.push(val.date.toString().substring(5));
            that.line2Datas.data2.push(val.number);
          });
          let data = Mycommon.deepCopy(that.line2Datas);
          for (let i in data) {
            data[i] = data[i].splice(data[i].length - 7);
          }
          that.echarts_line2(data);
          //  console.log(data)
        }
      });
    },
    echarts_line2(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_line")[2]
      );
      // 绘制图表
      let option = {
        color: ["#f6acac", "#d48265", "#c23531"],
        xAxis: {
          gridIndex: "0",
          type: "category",
          boundaryGap: false,
          data: data.data1
        },
        yAxis: [
          {
            type: "value",
            position: "left"
          }
        ],
        grid: {
          top: "20%",
          left: "5%",
          right: "12%",
          bottom: "10%",
          containLabel: true
        },
        series: [
          {
            data: data.data2,
            type: "line",
            areaStyle: { normal: {} }
            // label: {
            //   normal: {
            //     show: true,
            //     position: "top"
            //   }
            // }
          }
        ]
      };
      myChart.setOption(option);
    },

    //跟进客户
    recentDay4(index) {
      let that = this;
      this.recentDayIndex4 = index;
      let data = Mycommon.deepCopy(that.line3Datas);
      for (let i in data) {
        if (index == 0) {
          data[i] = data[i].splice(data[i].length - 7);
        } else if (index == 1) {
          data[i] = data[i].splice(data[i].length - 15);
        }
      }
      that.echarts_line3(data);
    },
    echarts_line3Data() {
      // console.log('跟进客户data完成...')
      let that = this;
      Mycommon.http({
        url: "BossMarkClient",
        success(res) {
          //  console.log(res)
          res.data.data.forEach(val => {
            that.line3Datas.data1.push(val.date.toString().substring(5));
            that.line3Datas.data2.push(val.number);
          });
          let data = Mycommon.deepCopy(that.line3Datas);
          for (let i in data) {
            data[i] = data[i].splice(data[i].length - 7);
          }
          that.echarts_line3(data);
          //  console.log(data)
        }
      });
    },
    echarts_line3(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_line")[3]
      );
      // 绘制图表
      let option = {
        color: ["#f6acac", "#d48265", "#c23531"],
        xAxis: {
          gridIndex: "0",
          type: "category",
          boundaryGap: false,
          data: data.data1
        },
        yAxis: [
          {
            type: "value",
            position: "left"
          }
        ],
        grid: {
          top: "20%",
          left: "5%",
          right: "12%",
          bottom: "10%",
          containLabel: true
        },
        series: [
          {
            data: data.data2,
            type: "line",
            areaStyle: { normal: {} }
            // label: {
            //   normal: {
            //     show: true,
            //     position: "top"
            //   }
            // }
          }
        ]
      };
      myChart.setOption(option);
    },

    // 客户兴趣占比
    echartsPieData() {
      let that = this;

      Mycommon.http({
        url: "BossInterest",
        success(res) {
          let ress = res.data.data;
          let data = [];
          let legend = ["对公司感兴趣", "对产品感兴趣", "对员工感兴趣"];
          for (let val in ress) {
            data.push({ value: ress[val].number });
          }
          data.forEach((val, index) => {
            data[index].name = legend[index];
          });
          that.PieData.data = data;
          that.PieData.legend = legend;
          //  console.log('客户兴趣占比完成...')
          //  console.log(data)
          that.echarts_pie();
        }
      });
    },
    echarts_pie() {
      let that = this;

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_pie")[0]
      );

      // 绘制图表
      let option = {
        color: ["#c23531", "#2f4554", "#91c7ae"],
        legend: {
          bottom: 30,
          itemGap: 20,
          data: that.PieData.legend
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            center: ["50%", "40%"],
            radius: ["35%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: that.PieData.data
          }
        ]
      };
      myChart.setOption(option);
    },

    //进十五日客户活跃度
    echarts_line4Data() {
      // console.log('进十五日客户活跃度data完成...')
      let that = this;
      Mycommon.http({
        url: "BossActivity",
        success(res) {
          let data = res.data.data;

          let datas = {
            data1: [],
            data2: []
          };
          data.forEach(val => {
            val.date = val.date.toString().substring(5);
            datas.data1.push(val.date);
            datas.data2.push(val.number);
          });
          that.echarts_line4(datas);
          console.log(datas);
        }
      });
    },
    echarts_line4(datas) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_line")[4]
      );
      // 绘制图表
      let option = {
        color: ["#f6acac", "#d48265", "#c23531"],
        xAxis: {
          gridIndex: "0",
          type: "category",
          boundaryGap: false,
          data: datas.data1
        },
        yAxis: [
          {
            type: "value",
            position: "left"
          }
        ],
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true
        },
        series: [
          {
            data: datas.data2,
            type: "line",
            areaStyle: { normal: {} }
          }
        ]
      };
      myChart.setOption(option);
    },

    //进十五日客户点击量
    echarts_barData() {
      // console.log('进十五日客户活跃度data完成...')
      let that = this;
      Mycommon.http({
        url: "BossActivityBarGraph",
        success(res) {
          let data = res.data.data;
          // console.log(data)
          data.forEach(val => {
            that.barDatas.push({
              name: val.title,
              num: val.number,
              rate: val.rate
            });
          });
        }
      });
    }
  },
  mounted() {
    let that = this;
    that.Jiugongge(); //九宫图
    that.drawLineData(); //漏斗图
    that.echarts_lineData(); //订单+金额
    that.echartsPieData(); //兴趣占比
    that.echarts_line1Data(); //新增
    that.echarts_line2Data(); //咨询
    that.echarts_line3Data(); //跟进
    that.echarts_line4Data(); //活跃度
    that.echarts_barData(); //点击量
    //重绘，窗口大小改动时
    window.onresize = function temp() {
      this.drawLine().resize();
      this.echarts_line().resize();
      this.echarts_line1().resize();
      this.echarts_line2().resize();
      this.echarts_line3().resize();
      this.echarts_pie().resize();
      this.echarts_line4().resize();
      this.echarts_bar().resize();
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bottom {
  width: 100vw;
  height: 100px;
}
.longbing {
  height: 200px;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p1 {
  height: 10px;
}
.content {
  width: 750px;
  height: 750px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.content_lable {
  width: 208px;
  height: 208px;
  margin: 15px;
  border: 1px solid #e9e9e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #969696;
}
.c_r {
  color: #e93636;
  font-size: 34px;
  font-weight: 700;
  padding: 10px;
}
.echarts_mar {
  margin-top: 20px;
}
.echarts {
  width: 100vw;
  min-height: 460px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.echarts_title {
  height: 160px;
  display: flex;
  align-items: center;
  font-size: 32px;
}
.echarts_funnel {
  width: 100vw;
  height: 300px;
}
.echarts_line {
  width: 100vw;
  height: 600px;
}
.echarts_tabs {
  width: 60%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.echarts_tabs ul {
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid #e9e9e9;
}
.echarts_tabs .sel {
  border-color: #e93636;
  color: #e93636;
}
.echarts_pie {
  width: 100vw;
  height: 500px;
}
.echarts_bar {
  width: 100vw;
  height: 500px;
}
.echarts_bottom {
  width: 100vw;
  min-height: 100px;
  background: #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.echarts_bottom_div {
  width: 90vw;
  height: 60px;
  display: flex;
  align-items: center;
}
.echarts_bottom_div h6 {
  width: 16vw;
}
.echarts_bottom_div span {
  width: 70vw;
  height: 30px;
  background: #f7adad;
  border-radius: 20px;
  margin-right: 20px;
}
</style>
